<template>
  <div class="detail">

    <Head title="账单详情" />
    <div class="card">
      <div class="head">
        <i class="iconfont" :class="icons[billDetail.type_name]"></i>
        <span>{{ billDetail.type_name }}</span>
        <van-icon name="arrow" />
      </div>
      <div class="amount">{{ billDetail.pay_type === 1 ? '-' + billDetail.amount : '+' + billDetail.amount }}</div>
      <div class="content">
        <span>记录时间</span>
        <div>{{ curTime[0] }}年{{ curTime[1] }}月{{ curTime[2] }}日 {{ curTime[3] }}:{{ curTime[4] }}</div>
        <span>来源</span>
        <div>自动同步</div>
        <span>备注</span>
        <div>{{ billDetail.remark }}</div>
      </div>
      <div class="btn">
        <div class="del" @click="deleteBill">
          <i class="iconfont icon-shanchu"></i>
          <span>删除</span>
        </div>
        <div class="edit" @click="editBill">
          <i class="iconfont icon-bianji"></i>
          <span>编辑</span>
        </div>
      </div>
    </div>
  </div>

  <PopEdit ref="popEdit" :billDetail="billDetail" @refresh="onRefresh"/>
</template>

<script setup>
import { useRoute, useRouter } from 'vue-router';
import Head from '@/components/Head.vue';
import axios from '@/api/index.js';
import { onMounted, ref } from 'vue';
import fomateDate from '@/utils/date.js'
import { formateHour } from '@/utils/date.js'
import { showConfirmDialog, showSuccessToast, showFailToast } from 'vant';
import icons from '@/utils/icons'
import PopEdit from '@/components/PopAdd.vue';

const route = useRoute()
const router = useRouter()
// console.log(route.query.id)
const billDetail = ref({})// 当前账单详情
const curTime = ref([])// 当前账单的时间
const popEdit = ref(null)


// 获取账单详情api    /api/bill/detail?id=xxx，get请求
onMounted(async() => {
  // 获取账单数据
  const { data } = await axios.get(`/api/bill/detail?id=${route.query.id}`)
  billDetail.value = data
  curTime.value = [...fomateDate(new Date(Number(billDetail.value.date))), ...formateHour(Number(billDetail.value.date)).split(':')]
  console.log(data);
  // console.log(curTime.value);
  
})
// 点击删除，弹出确认框，点击确认，删除该账单，把id给后端   /api/bill/delete id=xxx，post请求
const deleteBill = () => {
  showConfirmDialog({
    message: '删除后，该条账单记录将从列表移除并无法找回'
  })
  .then(async() => {
    const res =  await axios.post(`/api/bill/delete?id=${billDetail.value.id}`)
    console.log(res);
    showSuccessToast('删除成功')
    setTimeout(() => {
      router.back()// 回到账单页面
    }, 1000)
  })// 点击确定跳回账单
  .catch(() => {
    showFailToast('删除失败');
  });// 点取消返回账单详情
}

//打开编辑账单弹窗
const editBill = () => {
  popEdit.value.show = true
}

// 编辑账单后刷新账单数据
const onRefresh = async() => {
  const { data } = await axios.get(`/api/bill/detail?id=${route.query.id}`)
  billDetail.value = data
  curTime.value = [...fomateDate(new Date(Number(billDetail.value.date))), ...formateHour(Number(billDetail.value.date)).split(':')]
}
</script>

<style lang="less" scoped>
.detail{
  background-color: #EDEDED;
  height: 100vh;
  .card{
    border-radius: 6px;
    margin: 5px 10px;
    padding: 20px 20px 0 20px;
    background-color: #fff;
    .head{
      text-align: center;
      font-weight: 600;
      margin: 20px;
      span{
        margin-left: 5px;
      }
    }
    .amount{
      font-size: 40px;
      font-weight: 550;
      text-align: center;
      margin-bottom: 30px;
    }
    .content{
      font-size: 15px;
      display: grid;
      grid-template-columns: 30% 70%;
      row-gap: 10px;
      border-bottom: 1px solid #EAEAEA;
      padding-bottom: 30px;
      span{
        color: #818181;
      }
    }
    .btn{
      padding: 20px;
      display: flex;
      justify-content: space-evenly;
      font-size: 14px;
      .del{
        display: inline-block;
        text-align: center;
        padding-right: 50px;
        color: red;
        border-right: 1px solid #EAEAEA;
      }
      .edit{
        display: inline-block;
        text-align: center;
      }
    }
  }
}
</style>